<template>
  <div class="server-body" :style="borderStyle">
    <div class="server-header-query">
      <div class="header-query-Body">
        <div class="query-left">
          <span class="header-title">我要办</span>
          <span>截止{{ getTime }}共上线
            <span style="color: #F56C6C">{{ service }}</span> 项服务</span>
        </div>
        <div class="query-body">
          <div class="container-li">
            <el-checkbox
              v-model="query.zxbl"
              @change="changeBlfs"
            >可在线办理</el-checkbox>
          </div>
          <div class="li-line" @click="hotClick">
            <span>服务热度</span>
            <div class="order-button">
              <i
                class="el-icon-caret-top custom-caret-top"
                :class="query.hot === true ? 'icon-active' : ''"
              />
              <i
                class="el-icon-caret-bottom"
                :class="query.hot === false ? 'icon-active' : ''"
              />
            </div>
          </div>
          <div class="li-line" @click="timeClick">
            <span>上线时间</span>
            <div class="order-button">
              <i
                class="el-icon-caret-top custom-caret-top"
                :class="query.time === true ? 'icon-active' : ''"
              />
              <i
                class="el-icon-caret-bottom"
                :class="query.time === false ? 'icon-active' : ''"
              />
            </div>
          </div>
          <div class="custom-input-line">
            <input
              v-model="query.blurry"
              class="custom-input"
              placeholder="请输入服务名称"
              @keyup.enter.native="queryObject"
            >
            <div class="input-search" @click="queryObject">
              <i class="el-icon-search" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="server-content-body">
      <div class="content-body-left">
        <div class="body-left-title" :style="titleStyle">服务分类</div>
        <div class="body-left-ul" :style="borderStyle">
          <el-scrollbar
            style="width: 100%;height: 100%;overflow-x: hidden;overflow-y: auto"
          >
            <div
              class="body-left-ul-li"
              :class="query.parentId === null ? 'active' : ''"
              @click="queryByParent(null)"
            >
              <div class="left-ul-li-title">
                全部分类
                <div class="left-ul-li-icon"><i class="el-icon-right" /></div>
              </div>
            </div>
            <div
              v-for="(item, index) in allParentList"
              :key="'fl-' + index"
              class="body-left-ul-li"
              :class="item.id === query.parentId ? 'active' : ''"
              @click="queryByParent(item)"
            >
              <div class="left-ul-li-title">
                {{ item.title }}
                <div class="left-ul-li-icon"><i class="el-icon-right" /></div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
      <div class="content-body-right">
        <div class="right-body-header">
          <div class="right-body-title">服务名称</div>
          <div class="right-body-rate">服务部门</div>
          <div class="right-body-rate">服务评价</div>
          <div class="right-body-rate">上线时间</div>
          <div class="right-body-rate">访问次数</div>
          <div class="right-body-rate">操作</div>
        </div>
        <div class="right-body-ul">
          <el-scrollbar
            style="width: 100%;height: 100%;overflow-x: hidden;overflow-y: auto"
          >
            <el-empty
              v-if="dataList === null || dataList.length === 0"
              :image-size="100"
            />
            <div v-else class="content-body" style="width: 100%;height: 100%">
              <div
                v-for="(item, index) in dataList"
                :key="'server-' + index"
                class="body-right-ul-li"
              >
                <div class="right-body-title">{{ item.name }}</div>
                <div class="right-body-rate">{{ item.zgbmmc }}</div>
                <div class="right-body-rate">
                  <el-rate
                    :value="builderRate(item)"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"
                    style="margin-top: 10px"
                  />
                </div>
                <div class="right-body-rate">{{ item.cjsj }}</div>
                <div class="right-body-rate">{{ item.fwcs }}</div>
                <div class="right-body-rate">
                  <div v-if="isAuth === true">
                    <el-button
                      type="primary"
                      round
                      size="mini"
                      :disabled="isAuth === true ? false : true"
                      @click="openEntity(item)"
                    >服务详情</el-button>
                    <el-button
                      type="success"
                      round
                      size="mini"
                      :disabled="isAuth === true ? false : true"
                      @click="openWindow(item)"
                    >立即办理</el-button>
                  </div>
                  <div v-else>
                    <el-popover placement="top" trigger="hover" width="200">
                      <p>你还没有登录，请先登录</p>
                      <div style="text-align: right; margin: 0">
                        <el-button
                          type="primary"
                          size="mini"
                          @click="login"
                        >登录</el-button>
                      </div>
                      <el-button
                        slot="reference"
                        type="primary"
                        round
                        size="mini"
                        :disabled="isAuth === true ? false : true"
                        @click="openEntity(item)"
                      >服务详情</el-button>
                    </el-popover>
                    <el-popover placement="top" trigger="hover" width="200">
                      <p>你还没有登录，请先登录</p>
                      <div style="text-align: right; margin: 0">
                        <el-button
                          type="primary"
                          size="mini"
                          @click="login"
                        >登录</el-button>
                      </div>
                      <el-button
                        slot="reference"
                        type="success"
                        round
                        size="mini"
                        :disabled="isAuth === true ? false : true"
                        @click="openWindow(item)"
                      >立即办理</el-button>
                    </el-popover>
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <div class="right-body-pager">
          <el-pagination
            :current-page="query.current"
            :page-size="query.rows"
            :total="totalElements"
            layout="total,prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import { queryAllParent } from '@/api/config/special'
import { queryCountAllService } from '@/api/config/config'
import { queryAllGuestService, queryAllUserService } from '@/api/service'
import { template } from '@/mixins/template'
import { layout } from '@/mixins/layout'

export default {
  name: 'OfficeHallPcManager', // 我要办
  mixins: [template, layout],
  props: {
    temp: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      dataList: [],
      column: [],
      queryList: [],
      allParentList: [],
      totalElements: 0,
      baseURL: process.env.VUE_APP_BASE_API.substring(
        0,
        process.env.VUE_APP_BASE_API.length - 1
      ),
      query: {
        blurry: '',
        parentId: null,
        hot: false,
        time: false,
        zxbl: false,
        current: 1,
        rows: 10
      },
      customStyle: {},
      titleStyle: {},
      bodyStyle: {},
      service: 0,
      isAuth: false,
      setting: []
    }
  },
  computed: {
    getTime() {
      const data = this.getCurrentTime()
      return data
    }
    // borderStyle() {
    //   if (this.temp.sfxsbk === true) {
    //     return {
    //       border: '1px solid #eeeeee',
    //       backgroundColor: this.customStyle.mrzt,
    //       opacity: this.customStyle.tmd,
    //       color: this.customStyle.fontColor
    //     }
    //   }
    //   if (this.temp.bkyy === true) {
    //     return {
    //       boxShadow: '0 2px 4px rgba(0, 0, 0, .12)',
    //       backgroundColor: this.customStyle.mrzt,
    //       opacity: this.customStyle.tmd,
    //       color: this.customStyle.fontColor
    //     }
    //   }
    //   return {
    //     backgroundColor: this.customStyle.mrzt,
    //     opacity: this.customStyle.tmd,
    //     color: this.customStyle.fontColor
    //   }
    // }
  },
  watch: {

    temp: {
      handler(newData, oldData) {
        this.query = {
          blurry: ''
        }
        if (this.showHeader) {
          const pzx = JSON.parse(newData.data.pzx)
          this.column = pzx
          this.setting = pzx
        } else {
          const pzx = JSON.parse(newData.pzx)
          this.setting = pzx
          this.column = pzx
        }
        if (undefined !== this.column.query && this.column.query !== null) {
          this.queryList = this.column.query
        } else {
          this.queryList = []
        }
        this.initData()
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  created() {
    this.initAllFl()
    this.initAllService()
  },
  methods: {
    async initAllService() {
      queryCountAllService()
        .then(res => {
          const { data } = res
          if (data !== null && undefined !== data) {
            this.service = data
          }
        })
        .catch(() => {
          console.log('获取全部服务数量失败！')
        })
    },
    queryByParent(data) {
      if (data === null) {
        this.query.parentId = null
      } else {
        this.query.parentId = data.id
      }
      this.query.current = 1
      this.initData()
    },
    queryObject() {
      this.query.current = 1
      this.initData()
    },
    changeBlfs() {
      this.query.current = 1
      this.initData()
    },
    hotClick() {
      if (this.query.hot === false) {
        this.query.hot = true
      } else {
        this.query.hot = false
      }
      this.query.current = 1
      this.initData()
    },
    timeClick() {
      this.query.current = 1
      if (this.query.time === false) {
        this.query.time = true
      } else {
        this.query.time = false
      }
      this.initData()
    },
    initData() {
      if (getToken()) {
        this.isAuth = true
        queryAllUserService(this.query)
          .then(res => {
            const { data } = res
            this.dataList = data.data
            this.totalElements = data.pager.totalElements
          })
          .catch(() => {
            console.log('初始化服务数据失败！')
          })
      } else {
        this.isAuth = false
        queryAllGuestService(this.query)
          .then(res => {
            const { data } = res
            this.dataList = data.data
            this.totalElements = data.pager.totalElements
          })
          .catch(() => {
            console.log('初始化服务失败！')
          })
      }
    },
    builderRate(data) {
      if (data !== null && data.ratesum !== null) {
        return parseFloat((data.ratesum / (data.ratecount * 4)).toFixed(1))
      } else {
        return 5
      }
    },
    handleCurrentChange(val) {
      this.query.current = val
      this.initData()
    },
    handleSizeChange(val) {
      this.query.rows = val
      this.initData()
    },
    openWindow(object) {
      window.open(object.openUrl, '_blank')
    },
    getCurrentTime() {
      // 获取当前时间并打印
      // const _this = this
      const yy = new Date().getFullYear()
      const mm = new Date().getMonth() + 1
      const dd = new Date().getDate()
      // const hh = new Date().getHours()
      // const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      // const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      const time = yy + '年' + mm + '月' + dd + '日'
      return time
    },
    initAllFl() {
      queryAllParent().then(res => {
        const { data } = res
        this.allParentList = data.data
      })
    },
    login() {
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
.server-body {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #ffffff;
  display: flex;
  flex-flow: column nowrap;
  padding: 0px 10px;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.server-header-query {
  flex: 0 1;
  height: 80px;
  width: 100%;
  padding: 0px 20px;
  box-sizing: border-box;
}
.header-query-Body {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ebeef5;
}
.query-body {
  display: flex;
  align-items: center;
  color: #909399;
}
.query-left {
  color: #909399;
  font-size: 14px;
}
.header-title {
  font-size: 24px;
  color: #303133;
  font-weight: 700;
}
.server-content-body {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  padding: 15px 0px;
  box-sizing: border-box;
}
.content-body-left {
  width: 240px;
  flex: 0 1 auto;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-flow: column;
}
.content-body-right {
  flex: 1 1;
  height: 100%;
  overflow: hidden;
}
.body-left-ul {
  flex: 0 1 auto;
  height: 550px;
  overflow: hidden;
  border-radius: 0px 0px 4px 4px;
}
.right-body-header,
.body-left-ul {
  background-color: #e4e7ed;
}
.body-left-title {
  border-radius: 4px 4px 0px 0px;
  font-size: 16px;
  font-weight: bold;
}
.body-left-ul-li {
  position: relative;
  cursor: pointer;
}
.body-left-ul-li:not(:last-child),
.body-right-ul-li,
.right-body-header {
  border-bottom: 1px solid #dcdfe6;
}
.body-left-ul-li.active,
.body-left-ul-li:hover {
  background-color: #f2f6fc;
}
.left-ul-li-title {
  width: 100%;
  height: 100%;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.left-ul-li-icon {
  position: absolute;
  width: 15px;
  right: 0px;
  top: 0px;
}
.right-body-header {
  width: 100%;
  flex: 0 1 auto;
  height: 45px;
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
  font-weight: bold;
}
.right-body-ul {
  width: 100%;
  flex: 0 1 auto;
  height: 500px;
  overflow: hidden;
}
.right-body-header,
.body-right-ul-li,
.right-body-pager {
  padding: 0px 15px;
  box-sizing: border-box;
}
.body-left-title,
.body-left-ul-li,
.left-ul-li-icon {
  height: 50px;
  text-align: center;
  line-height: 50px;
}
.content-body-left .body-left-title,
.body-left-ul-li,
.content-body-right {
  padding: 0px 15px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
}
.container-li {
  width: 108px;
}
.custom-input-line {
  width: 230px;
  height: 35px;
  display: flex;
  align-items: center;
  padding: 2px 5px 2px 5px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #409eff;
  border-radius: 4px;
}
.custom-input-line input {
  width: 195px;
  outline: none;
  border: none;
}
.input-search {
  width: 35px;
  text-align: center;
  line-height: 35px;
  cursor: pointer;
  font-size: 16px;
}
.li-line {
  width: 90px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.el-icon-caret-top.custom-caret-top.icon-active,
.el-icon-caret-bottom.icon-active {
  color: #303133;
}
.order-button {
  display: flex;
  flex-flow: column;
}
.el-icon-caret-top.custom-caret-top {
  height: 8px;
}
.right-body-rate {
  width: 200px;
  flex: 0 1 auto;
  height: 45px;
  line-height: 45px;
  text-align: center;
}
.right-body-title {
  flex: 1 1;
  height: 45px;
  line-height: 45px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.body-right-ul-li {
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: flex;
  flex-flow: row nowrap;
}
.right-body-pager {
  height: 55px;
  width: 100%;
  flex: 0 1 auto;
  padding: 10px 0px;
  box-sizing: border-box;
  text-align: center;
}
.body-right-ul-li .right-body-rate,
.body-right-ul-li .right-body-title {
  height: 50px;
  line-height: 50px;
}
.el-scrollbar ::v-deep .el-scrollbar__wrap {
  margin: 0px !important;
}
</style>
